<template>
  <div class="app-container">
    <el-radio-group v-model="saasId" @change="onChange">
      <el-radio-button
        :label="item.type"
        v-for="item in sassList"
        :key="item.type"
        >{{ item.name }}</el-radio-button
      >
    </el-radio-group>
    <div v-loading="loading">
      <el-tabs type="border-card" class="mt20" v-if="!loading" >
      <el-tab-pane
        :label="item.categoryName"
        v-for="item in typesData"
        :key="item.categoryType"
      >
        <Setting
          :key="item.categoryType + '_setting'"
          :categoryType="item.categoryType"
          :saasId="saasId"
        />
      </el-tab-pane>
    </el-tabs>
    </div>
   
  </div>
</template>

<script>
import Setting from "../quotation/components/setting.vue";
import {
  apiCommonSaasList,
  apiServiceCategoryGetRootCategory,
} from "@/api/serviceClassify.js";

export default {
  components: { Setting },
  data() {
    return {
      saasId: "",
      sassList: [],
      typesData: [],
      loading:false
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    onChange(){
      this.loading = true
      setTimeout(() => {
        this.loading = false
      }, 300);
    },
    getData() {
      apiCommonSaasList().then((res) => {
        this.sassList = res.data;
        if (this.sassList.length > 0) {
          this.saasId = this.sassList[0].type;
          apiServiceCategoryGetRootCategory().then((res) => {
            this.typesData = res.data;
          });
        }
      });
    },
  },
};
</script>

